<template>
  <div class="app-container">
    <div class="filter-container">

    </div>
    <div>
      <el-table
        border
        v-loading="tableloading"
        :data="tableData"
      >
        <el-table-column
          prop="taskName"
          label="任务名"
          align=center
          width="150px"
        >
        </el-table-column>
        <el-table-column
          prop="intro"
          label="简介"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="step"
          label="步骤"
          align=center
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align=center
          width="200px"
        >
        </el-table-column>
        <el-table-column
          label="顶部图片"
          align=center
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.headImg"
              alt=""
              style="width:100%"
            >
          </template>
        </el-table-column>
        <el-table-column
          label="步骤图片"
          align=center
        >
          <template
            slot-scope="scope"
            align=center
          >
            <el-button
              type="text"
              @click="showImgDialog(scope.row.stepImg)"
              size="small"
              v-if="scope.row.stepImg.split(',')[0] !== ''"
            >查看图片</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="任务次数"
          align=center
        >
          <template slot-scope="scope">
            <span v-if="scope.row.task_way == 1">
              单次任务
            </span>
            <span v-else-if="scope.row.task_way == 2">
              多次任务
            </span>
            <span v-else-if="scope.row.task_way == 3">
              连续监测任务
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reward"
          label="任务奖励"
          align=center
        >
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="步骤图片"
      :visible.sync="dialogTableVisible"
      top="4%"
      width="40%"
    >
      <el-carousel
        :autoplay="false"
        arrow="always"
        indicator-position="outside"
        height="500px"
      >
        <el-carousel-item
          v-for="(item,index) in picture"
          :key="index"
          style="text-align:center;"
        >
          <div style="text-">
            <img
              :src="item"
              style="width:50%"
            >
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>

  </div>
</template>
<script>
import { fetchTaskList } from "@/api/table";
export default {
  data() {
    return {
      tableloading: false,
      tableData: [],
      dialogTableVisible: false,
      picture: []
    };
  },
  mounted() {
    this.getTaskLis();
  },
  methods: {
    showImgDialog(img) {
      this.dialogTableVisible = true;
      this.picture = img.split(",");
    },
    async getTaskLis() {
      const tasklist = await fetchTaskList();
      tasklist.data.forEach(item => {
        const task = {};
        task.taskName = item.taskName;
        task.intro = item.intro;
        task.step = item.step;
        task.remark = item.remark;
        task.stepImg = item.stepImg;
        task.headImg = item.headImg;
        task.task_way = item.task_way;
        task.reward = item.reward;
        this.tableData.push(task);
      });
    }
  }
};
</script>
